<template>
    <base-breadcrumb>
        <div class="page-btn-right-top">
            <a-button type="primary" @click="submit" style="margin-right: 10px" :loading="loading" v-if="$route.query.pageType!=='look'">
                提交
            </a-button>
            <a-button @click="close">
                关闭
            </a-button>
        </div>
        <a-card>
            <title-name title="西南公司年度目标产值"></title-name>
            <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="{span:6}"
                    :wrapper-col="{span: 18}"
            >
                <a-row>
                    <a-col :span="8">
                        <a-form-model-item label="年度：" prop="year" class="requiredFormItem">
                            <a-date-picker mode="year" placeholder="请选择" v-model="form.year"
                                           format="YYYY"
                                           valueFormat="YYYY"
                                           :open="yearOpen"
                                           :disabled="$route.query.pageType==='look'"
                                           :disabledDate="disabledDate"
                                           @openChange="openChange"
                                           @panelChange="panelChange"></a-date-picker>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item prop="year">
                            <template slot="label">
                                年度产值目标(底线)<span style="color: #FF0000">(亿元)</span>
                            </template>
                            <a-input v-model="form.yearOutputBaseline" disabled placeholder="分公司之和，不可修改"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item prop="year">
                            <template slot="label">
                                年度产值目标(目标)<span style="color: #FF0000">(亿元)</span>
                            </template>
                            <a-input v-model="form.yearOutputTarget" disabled placeholder="分公司之和，不可修改"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item prop="year">
                            <template slot="label">
                                年度产值目标(奋斗)<span style="color: #FF0000">(亿元)</span>
                            </template>
                            <a-input v-model="form.yearOutputStruggle" disabled placeholder="分公司之和，不可修改"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item prop="year" class="requiredFormItem">
                            <template slot="label">
                                人均产值目标(底线)<span style="color: #FF0000">(万元)</span>
                            </template>
                             <a-input-number style="width: 100%" :max="9999999999999" :min="0" v-model="form.perOutputBaseline"
                                            :disabled="$route.query.pageType==='look'"
                                            :precision="2" class="requiredFormItem" placeholder="请输入"></a-input-number>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item prop="year" class="requiredFormItem">
                            <template slot="label">
                                人均产值目标(目标)<span style="color: #FF0000">(万元)</span>
                            </template>
                             <a-input-number style="width: 100%" :max="9999999999999" :min="0"  a-input-number :precision="2" class="requiredFormItem" placeholder="请输入"
                                             :disabled="$route.query.pageType==='look'"
                                    v-model="form.perOutputTarget"></a-input-number>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item prop="year" class="requiredFormItem">
                            <template slot="label">
                                人均产值目标(奋斗)<span style="color: #FF0000">(万元)</span>
                            </template>
                             <a-input-number style="width: 100%" :max="9999999999999" :min="0" :precision="2" class="requiredFormItem" placeholder="请输入"
                                            :disabled="$route.query.pageType==='look'"
                                    v-model="form.perOutputStruggle"></a-input-number>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-card>
        <a-card>
            <title-name title="分公司年度目标产值"></title-name>
            <a-table bordered :columns="columns" :data-source="dataSource" :pagination="false" rowKey="unitId" :scroll="{x:true}">
                <template slot="serial" slot-scope="text,record, index">
                    {{index+1}}
                </template>
                <template slot="title1">
                    年度产值目标(底线)<span style="color: #FF0000">(亿元)</span>
                </template>
                <template slot="title2">
                    年度产值目标(目标)<span style="color: #FF0000">(亿元)</span>
                </template>
                <template slot="title3">
                    年度产值目标(奋斗)<span style="color: #FF0000">(亿元)</span>
                </template>
                <template slot="title4">
                    人均产值目标(底线)<span style="color: #FF0000">(万元)</span>
                </template>
                <template slot="title5">
                    人均产值目标(目标)<span style="color: #FF0000">(万元)</span>
                </template>
                <template slot="title6">
                    人均产值目标(奋斗)<span style="color: #FF0000">(万元)</span>
                </template>
                <template slot="action1" slot-scope="text, record">
                     <a-input-number style="width: 100%" :max="9999999999999" :min="0" :precision="2" :class="{requiredFormItem:$route.query.pageType!=='look'}" placeholder="请输入" autocomplete="off"
                                    :disabled="$route.query.pageType==='look'"
                                    v-model="record.yearOutputBaseline"
                                    @blur="handleChange($event, 'yearOutputBaseline')"
                    ></a-input-number>
                </template>
                <template slot="action2" slot-scope="text, record">
                     <a-input-number style="width: 100%" :max="9999999999999" :min="0" :precision="2" :class="{requiredFormItem:$route.query.pageType!=='look'}" placeholder="请输入" autocomplete="off"
                                    :disabled="$route.query.pageType==='look'"
                                    v-model="record.yearOutputTarget"
                                    @blur="handleChange($event, 'yearOutputTarget')"></a-input-number>
                </template>
                <template slot="action3" slot-scope="text, record">
                     <a-input-number style="width: 100%" :max="9999999999999" :min="0" :precision="2" :class="{requiredFormItem:$route.query.pageType!=='look'}" placeholder="请输入" autocomplete="off"
                                    v-model="record.yearOutputStruggle"
                                    :disabled="$route.query.pageType==='look'"
                                    @blur="handleChange($event, 'yearOutputStruggle')"></a-input-number>
                </template>
                <template slot="action4" slot-scope="text, record">
                     <a-input-number style="width: 100%" :max="9999999999999" :min="0" :precision="2" :class="{requiredFormItem:$route.query.pageType!=='look'}" placeholder="请输入" autocomplete="off"
                                    :disabled="$route.query.pageType==='look'"
                                    v-model="record.perOutputBaseline"></a-input-number>
                </template>
                <template slot="action5" slot-scope="text, record">
                     <a-input-number style="width: 100%" :max="9999999999999" :min="0" :precision="2" :class="{requiredFormItem:$route.query.pageType!=='look'}" placeholder="请输入" autocomplete="off"
                                    :disabled="$route.query.pageType==='look'"
                                    v-model="record.perOutputTarget"></a-input-number>
                </template>
                <template slot="action6" slot-scope="text, record">
                     <a-input-number style="width: 100%" :max="9999999999999" :min="0" :precision="2" :class="{requiredFormItem:$route.query.pageType!=='look'}" placeholder="请输入" autocomplete="off"
                                    :disabled="$route.query.pageType==='look'"
                                    v-model="record.perOutputStruggle"></a-input-number>
                </template>
            </a-table>
        </a-card>
    </base-breadcrumb>
</template>

<script>
  import { getAllBranchCompany } from '@/api/commons'
  import { createYearTarget, queryYearTargetYearList, queryYearTargetDetail,editYearTarget } from '@/api/project/productionRecords'
  import moment from 'moment'

  export default {
    name: 'addTargetValue',
    data() {
      return {
        loading: false,
        yearOpen: false,
        form: {
          'perOutputBaseline': '', //人均产值目标(底线)(万元)
          'perOutputStruggle': '', //人均产值目标(奋斗)(万元)
          'perOutputTarget': '', // 人均产值目标(目标)(万元)
          'unitId': '53085e2c9f1f4685801ef31994f57c49',
          'unitType': 'CO',
          'year': '', // 年度
          'yearOutputBaseline': '', //年度产值目标(底线)(亿元)
          'yearOutputStruggle': '', //年度产值目标(奋斗)(亿元)
          'yearOutputTarget': '' //年度产值目标(目标)(亿元)
        },
        rules: {},
        columns: [
          {
            title: '序号',
            dataIndex: 'index',
            width: 80,
            scopedSlots: { customRender: 'serial' }
          },
          {
            title: '分公司名称',
            dataIndex: 'unitName',
            width: 200
          },
          {
            dataIndex: 'yearOutputBaseline',
            slots: {title: "title1"},
            scopedSlots: { customRender: 'action1' }
          },
          {
            dataIndex: 'yearOutputTarget',
            slots: {title: "title2"},
            scopedSlots: { customRender: 'action2' }
          },
          {
            slots: {title: "title3"},
            dataIndex: 'yearOutputStruggle',
            scopedSlots: { customRender: 'action3' }
          },
          {
            slots: {title: "title4"},
            dataIndex: 'perOutputBaseline',
            scopedSlots: { customRender: 'action4' }
          },
          {
            slots: {title: "title5"},
            dataIndex: 'perOutputTarget',
            scopedSlots: { customRender: 'action5' }
          },
          {
            slots: {title: "title6"},
            dataIndex: 'perOutputStruggle',
            scopedSlots: { customRender: 'action6' }
          }
        ],
        dataSource: [],
        id: '',
        disabledYearList: [],
        cacheYear: ''
      }
    },
    created() {
      this.queryYearTargetYearList()
      this.id=this.$route.query.id;
      if(this.id) {
        this.queryYearTargetDetail()
      } else {
        this.getAllBranchCompany()
      }
    },
    methods: {
        close() {
            this.$router.replace({
                path:'/project/productionRecord',
                query: {
                    activeKey: this.$route.query.activeKey
                }
            })
        },
      queryYearTargetDetail() {
        queryYearTargetDetail(this.id).then(res=>{
          const form =  res.data.filter((item) => item.unitType==='CO')
          const arr =  res.data.filter((item) => item.unitType==='BC')
          this.form = form[0];
          this.cacheYear = form[0].year
          this.dataSource = arr;
        })
      },
      //年度组件不生效
      disabledDate(date) {
        const y = moment(date).format("YYYY").toString()
        // console.log(y, 'y', this.disabledYearList)
        return this.disabledYearList.includes(y)
      },
      queryYearTargetYearList(){
        queryYearTargetYearList().then(res=>{
          this.disabledYearList = res.data
          // console.log(res, '年份')
        })
      },
      getAllBranchCompany() {
        getAllBranchCompany({ tagCodes: ['BC'] }).then(res => {
          console.log(res, '分公司')
          const result = res.data
          const arr = []
          result.forEach((item, index) => {
            const obj = {
              'perOutputBaseline': '',
              'perOutputStruggle': '',
              'perOutputTarget': '',
              'unitId': item.id,
              'unitName': item.name,
              'unitType': 'BC',
              'yearOutputBaseline': '',
              'yearOutputStruggle': '',
              'yearOutputTarget': ''
            }
            arr.push(obj)
          })
          this.dataSource = arr
        })
      },
      openChange(status) {
        if (status) {
          this.yearOpen = true
        }
      },
      panelChange(value) {
        this.yearOpen = false
        this.form.year = value
        const year = moment(this.form.year).format('YYYY')
        const _year = moment(this.cacheYear).format('YYYY')
        if (this.disabledYearList.includes(year.toString()) && !this.id&&year!==_year) {
          this.$message.warning("当前年度已有数据")
          this.form.year = ''
        }
      },
      handleChange(val, prop) {
        let num = 0;
        this.dataSource.forEach(item=>{
          if(item[prop]) {
            num += item[prop]*100
          }
        })
        this.form[prop] = num/100
      },
      submit() {
        if(!this.form.year) {
          this.$message.warning("请选择年度")
          return
        }
        let year = ''
        if(this.form.year) {
           year = moment(this.form.year).format("YYYY")
          this.dataSource.forEach(item => {
            item.year = year
          })
        }
        const arr = [{...this.form, year}, ...this.dataSource]
        this.loading = true
        if (!this.id) {
          // 新增
          createYearTarget(arr).then(res => {
            this.loading = false
            if(res.code === 200) {
              this.$message.success('提交成功')
              this.$router.back()
            }
          }).catch(()=>{
            this.loading = false
          })
        } else {
          editYearTarget(arr).then(res => {
            this.loading = false
            if(res.code === 200) {
              this.$message.success('提交成功')
              this.close()
            }
          }).catch(()=>{
            this.loading = false
          })
        }
      }
    }
  }
</script>

<style scoped>
.requiredFormItem.ant-input-number {
    border: 0!important;
}
.ant-input-number:focus {
    box-shadow: none!important;
}
    .ant-input-number-handler-wrap {
        display: none!important;
    }
</style>